<template>
	<div style="line-height: 40px;">
		<!-- 搜索框 -->
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="客户姓名">
				<el-input v-model="formInline.name" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="formInline.tel" placeholder=""></el-input>
			</el-form-item>
			<!-- 			<el-form-item label="客户类型">
				<el-select v-model="formInline.customertype" placeholder="请选择">
					<el-option label="全部" value="" ></el-option>
					<el-option label="个体" value="1"></el-option>
					<el-option label="公司" value="2"></el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>

		<!-- :default-sort="{prop: 'id', order: 'id'}" -->
		<el-table :data="pageInfo.list" style="width: 100%" stripe>
			<!-- 多选框 -->
			<el-table-column label="ID" prop="id" width="180">
			</el-table-column>
			<el-table-column label="姓名" prop="name" width="180">
			</el-table-column>
			<el-table-column label="电话" prop="tel" width="180">
			</el-table-column>
			<el-table-column label="客户类型" prop="customertype" width="180">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- 修改按钮 -->
					<el-button type="primary" @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
					<el-dialog title="信息修改" :visible.sync="editButtonVisible">
						<el-form :model="updateform">
							<el-form-item label="编号" :label-width="formLabelWidth">
								<el-input v-text="updateform.id" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="客户姓名" :label-width="formLabelWidth">
								<el-input v-model="updateform.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="联系电话" :label-width="formLabelWidth">
								<el-input v-model="updateform.tel" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="客户类型" :label-width="formLabelWidth">
								<!-- <el-input v-model="updateform.customertype" autocomplete="off"></el-input> -->
								<el-select v-model="updateform.customertype" placeholder="">
									<el-option label="公司" value="公司"></el-option>
									<el-option label="个人" value="个人"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="addButtonVisible = false">取消</el-button>
							<el-button type="primary" @click="updateY()">确认修改</el-button>
						</div>
					</el-dialog>
					&nbsp;

					<!-- 删除按钮 -->
					<el-button type="danger" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
					<el-dialog title="确认删除" :visible.sync="deleteButtonVisible" width="30%" :before-close="handleClose">
						<span>是否删除此条客户信息</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="deleteButtonVisible = false">取 消</el-button>
							<el-button type="primary" @click="deleteY(scope.row)">确 定</el-button>
						</span>
					</el-dialog>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="height: 50px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.PageNum"
			 :page-sizes="[4,6]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 分页
				currentPage: 1,
				pageSize: 4,
				pageInfo: {},

				addButtonVisible: false,
				editButtonVisible: false,
				deleteButtonVisible: false,
				tableData: [],
				form: {
					id: '',
					name: '',
					tel: '',
					customertype: '',
				},
				formInline: {
					name: '',
					tel: '',
					customertype: '',
				},
				updateform: {
					id: '',
					name: '',
					tel: '',
					customertype: ''
				},
				formLabelWidth: '120px',
				inputId: '',
				inputName: '',
				inputTel: '',

			}
		},
		methods: {
			// 分页
			handleSizeChange(val) {
				console.log(`每页${val}条`)
				this.pageSize = val;
				this.userList();
			},

			handleCurrentChange(val) {
				this.currentPage = val;
				this.userList();
			},


			// 修改
			handleEdit(index, row) {
				this.editButtonVisible = true,
					console.log(index, row);
				this.updateform = {
					...row
				};
			},
			updateY() {
				this.axios.put("http://localhost:8080/customers/update", {
					id: this.updateform.id,
					name: this.updateform.name,
					tel: this.updateform.tel,
					customertype: this.updateform.customertype,
				}).then(res => {
					this.userList();
					this.editButtonVisible = false;

				})
			},
			// 删除
			handleDelete(index, row) {
				this.deleteButtonVisible = true;
				this.rowId = row.id;
			},
			deleteY() {
				this.axios.delete("http://localhost:8080/customers/" + this.rowId).then(res => {
					this.userList();
					this.deleteButtonVisible = false;
				})
			},

			// 显示所有用户信息
			userList() {
				this.axios.get("http://localhost:8080/customers/" + this.currentPage + "/" + this.pageSize).then(res => {
					console.log(res.data.data.list)
					this.pageInfo = res.data.data;

				})
			},
			// 条件查询
			onSubmit() {
				this.axios.post("http://localhost:8080/customers/findByCondition", {
					name: this.formInline.name,
					tel: this.formInline.tel,
					customertype: this.formInline.customertype,
				}).then(res => {
					this.tableData = [];
					var retrunlist = [];
					retrunlist.push(res.data.data);
					this.pageInfo.list = retrunlist;
					console.log(this.pageInfo.list)
				})
			},


		},
		created() {
			this.userList();
		}
	}
</script>
